<template>
  <div class="carWrap" >
    <div v-if="showCarInfo" class="messageBox" :style="{left: (carDetail.left<50?80:carDetail.left)+'px', top: carDetail.top+'px'}">
      <span>{{'设备状态：'+ (carDetail.x)}}</span>
      <span>{{'故障信息：'+ (carDetail.y)}}</span>
    </div>
    <div class="carBox"  :style="{left: carDetail?.left+'px', top: carDetail?.top+'px'}" @click="handleCar($event)" v-show="carDetail.left">
      <img v-if="!(carDetail.action == 2)" src="@/assets/images/fourPosiCar.png" alt="" >
      <img v-else src="@/assets/images/car_cargo.png" alt="" >
      <img v-if="carDetail.workStatus" class="warnImg" src="@/assets/images/icon_caution.png" alt="">
    </div>
  </div>
</template>

<script>
export default {
  props: ['carDetail', 'locationScaleX', 'locationScaleY'],
  data() {
    return {
      showCarInfo: false,
     
    }
  },
  mounted() {
    this.mySetProperty('1s, 1s')
  },
  methods: {
    handleCar() {
      this.showCarInfo = !this.showCarInfo
      if(this.showCarInfo) {
        this.messageInfo = {...this.carDetail}
      }else {
        this.messageInfo.left = 0
      }
    },
    mySetProperty(data) {
			const container = document.querySelector('.carBox')
      // let lt = bol? `0s, 1.2s`:`1.2s, 0s`
      container.style.setProperty('--lt', data)
    }
  }
}
</script>

<style lang="scss" scoped>
.carWrap{
  pointer-events: none;
  position: relative;
  // background: rgba($color: #000000, $alpha: 0.5);
  .carBox{
    pointer-events: auto;
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    text-align: center;
    font-size: 16px;
    line-height: 56px;
    // color: #fff;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition-property: left, top; /* 定义过渡的属性 */
    transition-duration: var(--lt); /* 定义每个属性变化的持续时间 */
    transition-delay: 0s, 0s; /* 定义每个属性开始变化的延迟 */

    .warnImg{
      position: absolute;
      right: 4px;
      top: 0px;
    }
  }
  .messageBox{
    width: 280px;
    height: 100px;
    background: rgba(0,19,102,0.9);
    box-shadow: inset 0px 1px 30px 0px #44D7B6;
    border-radius: 16px;
    border: 1px solid #44D7B6;
    position: absolute;
    z-index: 111;
    padding-left: 20px;
    justify-content: center;
    display: flex;
    flex-direction: column;
    transform: translate(-30%, -100%);
    span{
      margin-bottom: 5px;
      color: #fff;
      font-size: 14px;
    }
  }
}
</style>